<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>账单详情</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<style>
		body {
			width: 100%;
			height: 100%;
			background: #f5f5f5;
			padding-bottom: 15px;
		}

		#app .header {
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			background-color: #ffffff;
			font-size: 16px;
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#app .header img {
			width: 22px;
			height: 22px;
		}

		#app .header img:first-child {
			position: absolute;
			left: 15px;
		}

		#app .title {
			width: 100%;
			padding: 15px 15px 10px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: #999999;
		}

		#app .title .title_left {
			width: 65px;
			height: 25px;
			background-color: #ffffff;
			border-radius: 25px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #000;
		}

		#app .title .title_left div {
			width: 40px;
			text-align: justify;
			background-image: url(../../../image/billingdetails_icon_under.png);
			background-position: right center;
			background-size: 7.5px 4.5px;
			background-repeat: no-repeat;
		}

		#app .title .title_left div.selected {
			background-image: url(../../../image/billingdetails_icon_on.png);
		}

		.content {
			margin: 0 15px;
			box-sizing: border-box;
			border-radius: 15px;
			overflow: hidden;
		}

		.content .item_list {
			background: #ffffff;
			width: 100%;
			box-sizing: border-box;
			padding: 25px 15px;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			justify-content: space-between;
		}

		.content .item_list:last-child {
			border: 0;
		}

		.content .item_list .list_right {
			flex: 1;
			width: 100%;
		}

		.content .item_list .list_right div {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
		}

		.content .item_list .list_right .right_t {
			line-height: 25px;
			margin-bottom: 5px;
		}

		.content .item_list .list_right .right_t span:nth-child(1) {
			display: inline-block;
			width: 210px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 16px;
			color: #000;
			font-weight: bold;
		}

		.content .item_list .list_right .right_t span:nth-child(1) span{
			display: inline-flex;align-items:flex-start;
		}

		.content .item_list .list_right .right_t span:last-child {
			font-size: 25px;
			color: #ff3a24;
			font-weight: bold;
		}

		.content .item_list .list_right .right_c {
			font-size: 12px;
			color: #666666;
			line-height: 12px;
			margin-bottom: 10px;
		}

		.content .item_list .list_right .right_c .recl {
			color: #ff3a24;
		}

		.content .item_list .list_right .right_b {
			font-size: 12px;
			color: #999999;
			line-height: 12px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<img src="../../../image/icon_return.png" alt="" onclick="back()">
			账单详情
		</div>
		<ul class="content">

		</ul>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
	let next_p = 1;
	apiready = function () {
		resume("income_bill");

		$api.dom('.content').style.marginTop = $api.fixStatusBar($api.dom('.header')) + 15 + 'px';
		addEvent();
		bill_list();

	};
	function addEvent() {
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 1000,
			},
		}, function (ret, err) {
			bill_list();
			api.removeEventListener({
				name: 'scrolltobottom'
			});
			setTimeout(function () {
				addEvent()
			}, 1000)
		});
	}

	function bill_list() {
		$api.ajax({
			url: 'api/member/bill_list',
			method: 'get',
			data: {
				values: {
					next_p: next_p,
				}
			},
			page: next_p,
			timeOutHtml: $api.dom(".content")
		}, function (ret) {
			next_p = ret.data.next_p;
			ret.data.list.forEach(item => {
				let html = `<li class="item_list">
					<div class="list_right">
						<div class="right_t">
							<span>`+ item.type_name +
								`<span style="color:#666;font-size:12px;">`+
									(item.status == 0 ? "（待入账）" : (item.status == 1 ? "（已入账）" : "（已取消）")) +
							`</span></span>
							<span style="`+ (item.type == 2 ? "color:#666" : "") + `">` +	(item.amount / 100) + `</span>
						</div>
						<div class="right_b">`+ getLocalTime(item.fire_time) + `</div>
					</div>
				</li>`
				$api.append($api.dom(".content"), html)
			});
		});
	}

	function type(type) {
		switch (type) {
			case 0:
				return "订单交易初级返佣收入";
				break;
			case 1:
				return "订单交易次级返佣收入";
				break;
			case 2:
				return "提现";
				break;
			case 3:
				return "提现驳回";
				break;
			case 4:
				return "零元购返利";
				break;
			case 5:
				return "预绑返利";
				break;
			case 6:
				return "首单返利";
			case 8:
				return "任务红包";
			case 9:
				return "金币兑现";
			case 10:
				return "首单奖励";
				break;
		}
	}

	function back() {
		api.closeWin({
		});
	}
</script>

</html>
